<template>
	<view class="container pd-0">
		<image src="../../static/test-bg.png" mode="widthFix" class="title"></image>

		<image src="../../static/home-w.png" mode="" class="home-icon" @click="backHome"></image>
		<view class="desc">
			我答对了<text>{{score}}</text>道题
		</view>
		<view class="">
			查看答案
		</view>


		<button type="default" class="bt-1" @click="tryAgain">再来一次</button>
		<button type="default" class="bt-2" @click="shareResult">分享成绩</button>

		<view class="mask" v-show="isShow">
			<canvas id="canvas" type="2d"></canvas>
			<view class="button-group">
				<button class="btn-close" @click="closeShare">关闭</button>
				<button class="btn-save" @click="saveImage">保存图片</button>
			</view>
		</view>
	</view>

</template>

<script>
	let cvs = null;
	export default {
		data() {
			return {
				score: 0,
				ctx: null,
				isShow: false,
				canvas: null
			}
		},
		onLoad(option) {
			let score = option.score
			this.score = score;
		},
		mounted() {
			// 画布初始化
			this.init()
		},
		methods: {
			tryAgain() {
				uni.redirectTo({
					url: '/pages/test/TestHome'
				})
			},
			init() {
				const dpr = wx.getSystemInfoSync().pixelRatio;
				const w = 237;
				const h = 589;
				uni.createSelectorQuery().select('#canvas').node(async res => {

					const canvas = res.node
					cvs = canvas
					this.canvas = canvas;
					canvas.width = w * dpr;
					canvas.height = h * dpr;

					const ctx = canvas.getContext('2d')
					ctx.fillStyle = "#07BB84"
					ctx.fillRect(0, 0, w * dpr, h * dpr)

					// 绘制背景
					const bg = await this.drawImage(canvas, "../../static/test-bg.png")
					ctx.drawImage(bg, 220, 120, 380, 810, 0, 0, w * dpr, h * dpr)
					// 绘制文字
					ctx.fillStyle = "#fff"
					ctx.font = "48px serif";
					ctx.fillText("我答对了", 160, 240 * dpr)
					ctx.fillStyle = "#F6C167"
					ctx.font = "60px serif";
					ctx.fillText(this.score, 380, 240 * dpr)
					ctx.fillStyle = "#fff"
					ctx.font = "48px serif";
					ctx.fillText("道题", 420, 240 * dpr)
					ctx.fillText("快来试试你能答对", 160, 280 * dpr)
					ctx.fillText("几道题吧！", 230, 310 * dpr)
					// 绘制二维码
					const qrcode = await this.drawImage(canvas, "../../static/qrcode.png")
					ctx.drawImage(qrcode, 0, 0, 128, 128, w / 2 * dpr - 100, 380 * dpr, 200, 200)

				}).exec()
			},
			drawImage(canvas, url) {
				return new Promise(function(resolve, reject) {
					const img = canvas.createImage()
					img.src = url
					img.onload = function() {
						// 绘制底图
						resolve(img)
					}
					img.onerror = function() {
						reject("Image Load Failed")
					}
				})
			},
			shareResult() {
				this.isShow = true;
			},
			closeShare() {
				this.isShow = false;
			},
			saveImage() {


				// #ifdef MP-WEIXIN
				const w = 237;
				const h = 589;
				const dpr = wx.getSystemInfoSync().pixelRatio;
				wx.canvasToTempFilePath({ //将canvas生成图片
					canvas: cvs,
					width: w * dpr,
					height: h * dpr,
					destWidth: w * dpr, //截取canvas的宽度
					destHeight: h * dpr, //截取canvas的高度
					fileType: 'png',
					success: function(res) {
						console.log(res)
						wx.saveImageToPhotosAlbum({ //保存图片到相册
							filePath: res.tempFilePath,
							success: function() {
								wx.showToast({
									title: "生成图片成功！",
									duration: 2000
								})
							}
						})
					}
				})

				// #endif
			},
			backHome() {
				uni.redirectTo({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-icon {
		width: 30px;
		height: 30px;
		position: absolute;
		left: 20px;
		top: 50px;
	}

	.title {
		position: absolute;
		width: 1400rpx;
		margin-left: -420rpx;
		margin-top: -210rpx;
	}

	.desc {
		position: absolute;
		font-family: Fotor HelloFont GongYiTi;
		font-size: 72rpx;
		font-weight: normal;
		text-align: center;
		letter-spacing: 0em;
		color: #FFFFFF;
		width: 100%;
		line-height: 80rpx;
		bottom: 842rpx;

		text {
			font-size: 100rpx;
			color: #F6C167;
		}
	}


	button {
		width: 434rpx;
		line-height: 172rpx;
		background-color: #000 !important;
		border-radius: 86rpx;
		color: #fff !important;
		font-size: 36rpx;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.6);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.bt-1 {
		bottom: 266*2rpx;
		font-size: 48rpx;
	}

	.bt-2 {
		bottom: 150*2rpx;
		font-size: 58rpx;
	}

	.mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 100;
		top: 0;

		canvas {
			display: block;
			width: 273*2rpx;
			height: 589*2rpx;
			background-color: #fff;
			margin: 0rpx auto;
			margin-top: 180rpx;
		}

		.button-group {
			width: 273*2rpx;
			height: 100rpx;
			font-size: 12rpx;
			display: flex;
			margin: 0 auto;
			margin-top: 20px;
			justify-content: space-around;
			position: relative;

			.btn-close {
				width: 100px;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #fff;
				position: absolute;
				left: 100rpx;
			}

			.btn-save {
				position: absolute;
				width: 250rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #F7C167 !important;
				color: #000 !important;
				right: -120px;
			}

		}
	}
</style>